import React, {FC, useEffect, useRef, useState} from "react";
import {useRequest} from "@umijs/hooks";
import {fetchRequest} from "@/utils/Request";
import {url} from "@/utils/url";
import {Button, Drawer, Radio} from "antd";
import VideoPlayBack from "../VideoPlayBack";
import {ExpandOutlined} from '@ant-design/icons'

const Index: FC<{ deviceCode: string, deviceId: string, deviceName: string, getPlayer: (player: any, deviceId: string) => void }> = ({
                                                                                                                                         deviceCode,
                                                                                                                                         deviceId,
                                                                                                                                         deviceName,
                                                                                                                                         getPlayer

                                                                                                                                     }) => {

    let player = useRef<any>(null)


    const {data, run, loading} = useRequest(() => fetchRequest(url.LIVE_STEAMING, {
        deviceCode
    }), {
        manual: true,
        onSuccess: (data) => {

            player.current = setupVideo(deviceId, data?.data?.data)

            getPlayer(player.current, deviceId)

        }
    })


    const [visible, setVisible] = useState(false)


    const playback = (e: any) => {
        e.stopPropagation()
        setVisible(true)
    }
    const fullScreen = (e: any) => {
        e.stopPropagation()
        console.log(player)
        player.current?.fullscreenService?.requestFullScreen()

    }


    useEffect(() => {
        if (deviceId) {
            run()
        }


    }, [deviceId])


    return <>
        <div id={`live-play-${deviceId}`}/>

        <div className={'live-play-title'}>{deviceId ?
            <div>{loading ? <>加载中...</> : <div className={'mask'}>
                <ExpandOutlined onClick={fullScreen}/>
                <Button type={'primary'} onClick={playback}>回放</Button>
            </div>}</div> :
            <div>暂无数据</div>
        }</div>

        <Drawer destroyOnClose placement="right" closable={true} title={`${deviceName}【回放】`} width={1100}
                visible={visible}
                onClose={() => setVisible(false)}>

            <VideoPlayBack deviceCode={deviceCode}/>


        </Drawer>
    </>

}

const setupVideo = (deviceId: any, source: any) => {
    let defaultProps = {
        id: `live-play-${deviceId}`,
        source,
        // source: 'https://yunqivedio.alicdn.com/2017yq/v2/0x0/96d79d3f5400514a6883869399708e11/96d79d3f5400514a6883869399708e11.m3u8',
        // source:"rtmp://58.200.131.2:1935/livetv/hunantv",
        // source:"https://yunqivedio.alicdn.com/2017yq/v2/0x0/96d79d3f5400514a6883869399708e11/96d79d3f5400514a6883869399708e11.m3u8",
        height: "100%",
        preload: true, //开启预加载
        isLive: true,
        controlBarVisibility: "always", //工具栏显示的触发条件
        x5_fullscreen: true, // 视频作为背景
        skinLayout: false, // 工具栏配置
        showBarTime: 300, //工具栏隐藏时间(单位毫秒)
    };
    // @ts-ignore
    return new Aliplayer(defaultProps);

}

export default Index